<template>
  <div>
    <Table border stripe :height="tableHeight" :columns="columnNames" :data="columns" :row-class-name="GetTableRowClass" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [],
      columnNames: [
        {
          key: 'index',
          title: '序号',
          width: 70,
          align: 'center',
          render: (h, params) => {
            return h('div', [h('span', params.index + 1)]);
          }
        },
        {
          key: 'column_name',
          title: '字段名称'
        },
        {
          key: 'column_comment',
          title: '字段说明'
        },
        {
          key: 'column_type',
          title: '字段类型'
        },
        {
          key: 'is_nullable',
          title: '可空',
          width: 70,
          align: 'center',
          render: (h, data) => {
            return h('span', data.row.is_nullable == 'YES' || data.row.is_nullable == 1 ? '是' : '否');
          }
        },
        {
          key: 'column_key',
          title: '主键',
          width: 70,
          align: 'center',
          render: (h, data) => {
            let column_key = data.row.column_key;

            return h('span', column_key == 1 || column_key == 'PRI' ? '是' : '');
          }
        },
        {
          key: 'column_default',
          title: '默认值'
        }
      ]
    };
  },
  computed: {
    tableHeight() {
      return this.$store.state.area.tableDetail.height - 10;
    }
  },
  mounted() {
    this.GetColumns();
  },
  watch: {
    $route: function() {
      this.GetColumns();
    }
  },
  methods: {
    GetColumns() {
      let dbIndex = this.$route.params.dbIndex;
      let schema = this.$route.params.schema;
      let tableName = this.$route.params.tableName;

      if (dbIndex && schema && tableName) {
        this.$nextTick(() => {
          this.$http.get(`/api/${this.$route.query.dbtype}/${dbIndex}/${schema}/${tableName}/columns`).then(res => (this.columns = res.datas));
        });
      }
    },
    GetTableRowClass(row, index) {
      return parseInt(index % 2) == 0 ? 'warning-row' : 'success-row';
    }
  }
};
</script>

<style>
.ivu-table .warning-row {
  background: oldlace;
}

.ivu-table .success-row {
  background: #f0f9eb;
}
</style>
